<template>
	<div>
		<div class="pb30 plr30">
			<div class="text-center border-bottom pt20 relative" style="padding-bottom: 22px;">
				<span class="fb mr20">订单分析</span>
				<div class="year">
					<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
						<el-form-item label="年份" prop="year" style="margin-bottom: 0;">
							<el-date-picker size="large" v-model="year" type="year" placeholder="请选择" @change="changeTime" />
						</el-form-item>
					</el-form>
				</div>
			</div>
			<el-row class="  ">
				<el-col :span="10">
					<div id="my_pie_chart" style="height: 500px;"></div>
				</el-col>
				<el-col :span="14">
					<div class="pt20">
						<el-table :data="tableData" style="width: 100%" height="250"
							:cell-style="{ textAlign: 'center','line-height':'54px'}"
							:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
							<el-table-column prop="name" label="商品名称" />
							<el-table-column prop="amount" label="购买次数" />
							<el-table-column prop="money" label="订单总金额" />
							<el-table-column prop="ranking" label="排名" width="100" />
						</el-table>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="plr30">
			<div class="plr30 pt30 pb30 radius8" style="box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
				<div class="" id="my_bar_chart" style="height: 420px;"></div>
			</div>
		</div>
		<div>
			<div class="pt20">
				<div class="flex col-center row-between plr30 border-bottom pb10">
					<span class="fb mr20">销售列表</span>
					<div class="flex col-center">
						<el-button class="mt5" type="operate" @click="rankFunc()">
							<img v-if="queryParams1.orderBy == 'asc'" src="@/assets/images/rank.png" class="mr5" style="width: 10px;" alt=""/>
							<img v-else src="@/assets/images/rank1.png" class="mr5" style="width: 10px;" alt="" />
							排序
						</el-button>
						<!-- <el-button class="mt5" type="defaultBtn">导出</el-button> -->
						<el-dropdown  class="mt5 ml15" split-button type="defaultBtn" @command="handleExport">
						  导出
						  <template #dropdown>
							<el-dropdown-menu>
							  <el-dropdown-item command="asc">升序导出</el-dropdown-item>
							  <el-dropdown-item command="desc">降序导出</el-dropdown-item>
							</el-dropdown-menu>
						  </template>
						</el-dropdown>
					</div>
				</div>
				<div class="plr30 mt20">
					<div class="color2 fs14 mb15">
						<span class="mr10">销售数量：{{totalMoney}}</span>
						<span>销售金额：¥{{totalMoney}}</span>
					</div>
					<el-table :data="tableData1" style="width: 100%" height="250"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
						<el-table-column prop="yearMonth" label="时间" />
						<el-table-column prop="amount" label="销售数量" />
						<el-table-column prop="money" label="销售金额" />
						<el-table-column prop="rateOfIncrease" label="销售额环比增长" />
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { 
		orderAnalysisProduct,//客户360订单分析-产品订单统计
		orderAnalysisMonth
	} from '@/api/business/customer'
	import * as echarts from 'echarts';
	export default {
		props:{
			customerTypeProps:{
				type:Object,
				default:{}
			},
			activeName:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				year:new Date().getFullYear().toString(),
				queryParams: {
					pageNum:1,
					pageSize:10,
					year: new Date().getFullYear(),
					id:this.customerTypeProps.userId
				},
				queryParams1: {
					orderBy:'asc',
					year: new Date().getFullYear(),
					id:this.customerTypeProps.userId
				},
				totalMoney:0,
				totalNum:0,
				tableData: [],
				barChart: null,
				pieChart: null, // 饼图
				tableData1: [],
				table1Name:[],
				rank:false
			}
		},
		watch:{
			activeName(val){
				if(val == 'message4'){
					this.orderAnalysisProduct()
				}
			}
		},
		mounted() {
			
		},
		methods: {
			changeTime(e){
				const date = new Date(Date.parse(e));
				const year = date.getFullYear();
				this.queryParams.year = year
				this.queryParams1.year = year
				this.orderAnalysisProduct()
			},
			orderAnalysisProduct(){
				orderAnalysisProduct(this.queryParams).then(res=>{
					this.tableData = res.rows
					for(let key in this.tableData){
						this.tableData[key].value = this.tableData[key].money
					}
					this.total = res.total
					this.orderAnalysisMonth()
				})
			},
			// 排序
			rankFunc(){
				this.rank = !this.rank
				this.queryParams1.orderBy = this.rank == false ? 'asc' :'desc'
				this.orderAnalysisMonth()
			},
			// 导出
			handleExport(e){
				let that = this
				this.queryParams1.orderBy = e
				console.log(e,'eee')
				this.download(
				  "/customer/exportPrderAnalysisMonth",
				  {
				    ...this.queryParams,
				  },
				  `exportAnalysisMonth_${new Date().getTime()}.xlsx`
				);
			},
			// 柱状图
			orderAnalysisMonth(){
				orderAnalysisMonth(this.queryParams1).then(res=>{
					this.tableData1 = res.data
					console.log(this.tableData1,'this.tableData1')
					// 从小到大排序
					// this.tableData1.sort((a, b) => {
					//     return a.yearMonth.localeCompare(b.yearMonth);
					// });
					let arr = []
					let money = 0
					let num = 0
					for(let key in this.tableData1){
						this.tableData1[key].value = this.tableData1[key].money
						this.tableData1[key].name = this.tableData1[key].yearMonth
						arr.push(this.tableData1[key].name)
						money+=this.tableData1[key].money*1
						num+=this.tableData1[key].amount*1
					}
					this.totalMoney = money
					this.totalNum = num
					this.table1Name = arr
					console.log(this.tableData1,'333')
					
					setTimeout(()=>{
						this.barChart = echarts.init(document.getElementById("my_bar_chart"));
						this.pieChart = echarts.init(document.getElementById("my_pie_chart"));
						this.init();
					},200)
				})
			},
			handleQuery() {

			},
			init() {
				this.barChart.setOption({
					title: {
						text: "柱状图",
						textStyle: {
							color: "#333", // 标题颜色
							fontSize: 16, // 默认值：18
							fontWeight: "bold" // normal:正常粗细（默认值）,bold/bolder:粗体,lighter:正常粗细
						},
					},
					grid: {
						left: "40px",
						right: "10px",
						bottom: "30px",
						// width:"100px"//柱状图宽度
					},
					xAxis: {
						show: true,
						axisTick: {
							show: false,
							length: 20 // 竖线的长度
						},
						data: this.table1Name
					},
					yAxis: {
						axisLabel: {
							show: true
						}
					},
					series: [{
						name: "访问来源",
						type: "bar", // 设置图表类型为柱状
						color:'#1890FF',
						data: this.tableData1
						
					}]
				});
				this.pieChart.setOption({
					title: {
						text: ""
					},
					series: [{
						name: "访问来源",
						type: "pie", // 设置图表类型为饼图
						radius: "50%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
						data: this.tableData
					}]
				});
			}
		}
	}
</script>

<style>
	.year {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
	.rotate{
		transform: rotate(180deg);
	}
</style>